<template>
  <div class="home">
    <!-- 底部标题栏 -->
    <!-- 嵌套路由 根据二级路由地址动态显示router-view的内容 -->
   <router-view/>
    <van-tabbar
      fixed
      v-model="active"
      class="foot"
      active-color="#1a89fa"
      inactive-color="#000"
    >
      <van-tabbar-item name="index" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item name="shopping" icon="cart-o">商城</van-tabbar-item>
      <van-tabbar-item  name="me" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default{
  data() {
    return {
      active:this.$route.path.split('/').pop(), //底部选项卡默认选项
      
    }
  },
  watch: {
    active(newValue, oldValue) {
      // 监听active值的变化
      console.log(newValue);
      
      if(this.$route.path!== `/home/${newValue}`){
        this.$router.push(`/home/${newValue}`)
      }
      
      
    }
  },
}
</script>
